<template>
	<div class="test-gsvmzj">
		<el-form :model="ruleForm" :inline="true" :rules="required ? rules : null" label-width="60px" ref="ruleForm">
			<el-form-item prop="grade_id" label="年级">
				<el-select v-model="ruleForm.grade_id" placeholder="请选择年级">
					<el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="subject_id" label="科目">
				<el-select v-model="ruleForm.subject_id" placeholder="请选择科目">
					<el-option v-for="item in subjectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="version_id" label="版本">
				<el-select v-model="ruleForm.version_id" placeholder="请选择版本">
					<el-option v-for="item in editionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="masterial_id" label="教材">
				<el-select v-model="ruleForm.masterial_id" placeholder="请选择教材">
					<el-option v-for="item in materialData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="章节">
				<el-cascader :key="isPropertie1" :options="chapterList"  placeholder="选择章节"
					filterable clearable
					v-model="ruleForm.chapter">
				</el-cascader>
			</el-form-item>
			<el-form-item label="知识点">
				<el-cascader :key="isPropertie2" :options="knowledgeList"  placeholder="选择知识点"
				filterable clearable
				v-model="ruleForm.knowled">
				</el-cascader>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	props: {
		required: {
			required: false,
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ruleForm: {
				grade_id: '',
				subject_id: '',
				version_id: '',
				masterial_id: '',
				chapter: '',
				knowled: '',
            },       
			rules: {
				grade_id: [{ required: true, message: '请选择年级', trigger: 'change' }],
				subject_id: [{ required: true, message: '请选择科目', trigger: 'change' }],
				version_id: [{ required: true, message: '请选择版本', trigger: 'change' }],
				masterial_id: [{ required: true, message: '请选择教材', trigger: 'change' }]
			},
			gradeData: [],
			subjectData: [],
			editionData: [],
			materialData: [],
			chapterList: [], 	/* 章节列表*/
			knowledgeList: [],	/*知识点*/
			isPropertie1: 0, // 处理级联选择器无key值报错问题
			isPropertie2: 1, // 处理级联选择器无key值报错问题
		};
	},
	mounted() {
		this.getGrade();
		this.getSubject();
		this.getEdition();
		this.getMaterial();
	},
	watch: {
		"ruleForm.grade_id"(newVal, oldVal) {
			if(newVal) {
				this.ruleForm.subject_id = ''
				this.ruleForm.version_id = ''
				this.ruleForm.masterial_id = ''
				this.ruleForm.chapter = ''
				this.ruleForm.knowled = ''
				this.subjectData = []
				this.editionData = []
				this.materialData = []
				this.chapterList = []
				this.knowledgeList = []
				this.isPropertie1++
				this.isPropertie2++
				this.getSubject();
				this.$emit('changeArea',this.ruleForm)
			}
		},
		"ruleForm.subject_id"(newVal, oldVal) {
			if(newVal) {
				this.ruleForm.version_id = ''
				this.ruleForm.masterial_id = ''
				this.ruleForm.chapter = ''
				this.ruleForm.knowled = ''
				this.editionData = []
				this.materialData = []
				this.chapterList = []
				this.knowledgeList = []
				this.isPropertie1++
				this.isPropertie2++
				this.getEdition();
				this.$emit('changeArea',this.ruleForm)
			}
		},
		"ruleForm.version_id"(newVal, oldVal) {
			if(newVal) {
				this.ruleForm.masterial_id = ''
				this.ruleForm.chapter = ''
				this.ruleForm.knowled = ''
				this.materialData = []
				this.chapterList = []
				this.knowledgeList = []
				this.isPropertie1++
				this.isPropertie2++
				this.getMaterial();
				this.$emit('changeArea',this.ruleForm)
			}
		},
		"ruleForm.masterial_id"(newVal, oldVal) {
			if(newVal) {
				this.ruleForm.chapter = ''
				this.ruleForm.knowled = ''
				this.chapterList = []
				this.knowledgeList = []
				this.isPropertie1++
				this.isPropertie2++
				this.getChapter();
				this.getKnowledge();
				this.$emit('changeArea',this.ruleForm)
			}
		},
		"ruleForm.chapter"(newVal, oldVal) { 
			if(newVal) {
				this.$emit('changeArea',this.ruleForm)
			}
		},
		"ruleForm.knowled"(newVal, oldVal) { 
			if(newVal) {
				this.$emit('changeArea',this.ruleForm)
			}
		},
	},
	methods: {
		getGrade() {
			let success = res => {
				this.gradeData = res.data;
			};
			this.$ajax({
				url: 'api/org/org',
				method: 'get',
				params: {
					level: 3,
					direction: 'balance'
				},
				func: { success: success }
			});
		},
		getSubject() {

			let success = res => {
                this.subjectData = res.data;
			};
			this.$ajax({
				url: 'api/cate/subject',
				method: 'get',
				params: {
					type: 2,
					org_id: this.ruleForm.grade_id,
					status: 1
				},
				func: { success: success }
			});
		},
		getEdition() {

			let success = res => {
				this.editionData = res.data;
			};
			this.$ajax({
				url: 'api/cate/version',
				method: 'get',
				params: {
					type: 2,
					org_id: this.ruleForm.grade_id,
					sub_id: this.ruleForm.subject_id,
					status: 1
				},
				func: { success: success }
			});
		},
		getMaterial() {

			let success = res => {
                this.materialData = res.data;
			};
			this.$ajax({
				url: 'api/cate/material',
				method: 'get',
				params: {
					org_id: this.ruleForm.grade_id,
					sub_id: this.ruleForm.subject_id,
					ver_id: this.ruleForm.version_id,
					status: 1
				},
				func: { success: success }
			});
		},
		/**
		 * 请求章节数据
		 * @DateTime 2019-07-23T14:04:49+0800
		 * @return   {[type]}                 [description]
		 */
		getChapter(){

			let success = (res=>{

				res.data.forEach((item, index)=>{
					this.chapterList.push({
						value: item.id,
						label: item.name,
						children: []
					})

					if (item.children.length != 0) {

						item.children.forEach(child=>{
							this.chapterList[index].children.push({
								value: child.id,
								label: child.name
							})
						})
					}else{
						this.$set(this.chapterList[index], 'disabled', true)
					}


				})
			});

			let params = {
				material_id: this.ruleForm.masterial_id,
				type: 1
			};

			let fail = (res=>{
				this.$message.error({
					duration: 8000,
					message: res.msg
				})
			})

			this.$ajax({
				url: 'api/newtest/get_list_know_by_material',
				method: 'get',
				params: params,
				func: {success, fail}
			})
		},
		/**
		 * 请求章知识点数据
		 * @DateTime 2019-07-23T14:04:49+0800
		 * @return   {[type]}                 [description]
		 */
		getKnowledge(){

			let success = (res=>{

				res.data.forEach((item, index)=>{
					this.knowledgeList.push({
						value: item.id,
						label: item.name,
						children: []
					})

					if (item.children.length != 0) {

						item.children.forEach(child=>{
							this.knowledgeList[index].children.push({
								value: child.id,
								label: child.name
							})
						})
					}else{
						this.$set(this.knowledgeList[index], 'disabled', true)
					}


				})
			});

			let params = {
				material_id: this.ruleForm.masterial_id,
				type: 2
			};

			let fail = (res=>{
				this.$message.error({
					duration: 8000,
					message: res.msg
				})
			})

			this.$ajax({
				url: 'api/newtest/get_list_know_by_material',
				method: 'get',
				params: params,
				func: {success, fail}
			})
		},
		valiDate() {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				}
            });
		},
		resetFielder() {
			this.$refs.ruleForm.resetFields();
		},
		setDefault() {
			this.ruleForm = {
				grade_id: '',
				subject_id: '',
				version_id: '',
				masterial_id: '',
				chapter: '',
				knowled: ''
			};
		}
	}
};
</script>
<style lang="scss">
	.test-gsvmzj {
		
	}
</style>
